/* Animation CSS动画，按项目需求使用 */
/* 动画时长 */
/* 前台动画CSS类使用举例
d-none 预先隐藏（可选）
animate__animated 动画（必须）
animate__trigger 扳机（必须，动画元素父级，如当前section）
animate__fadeInLeft 动画类型（可选）
animate__d-5s 动画时长（可选）
animate__delay-d-5s 动画延迟（可选）
*/
/* 动画时长 */
.animate__animated{
    -webkit-animation-duration: unset;
    animation-duration: unset;
    -webkit-animation-duration: unset;
    animation-duration: unset;
    -webkit-animation-fill-mode: unset;
    animation-fill-mode: unset;
}
.animate_active .animate__animated{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block !important;
}
.animate_active .animate__animated.animate__d-5s{
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}
.animate_active .animate__animated.animate__1s{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.animate_active .animate__animated.animate__2s{
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animate_active .animate__animated.animate__3s{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
.animate_active .animate__animated.animate__4s{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
.animate_active .animate__animated.animate__5s{
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

.animate_active .animate__animated.animate__6s{
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}
.animate_active .animate__animated.animate__7s{
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}
.animate_active .animate__animated.animate__8s{
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}
.animate_active .animate__animated.animate__9s{
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
}
.animate_active .animate__animated.animate__10s{
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}
/* 动画延迟 */
.animate__animated.animate__delay-d-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-delay: calc(var(--animate-delay)*.5);
    animation-delay: calc(var(--animate-delay)*.5);
}

.animate__animated.animate__delay-1-d-5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-delay: calc(var(--animate-delay)*1.5);
    animation-delay: calc(var(--animate-delay)*1.5);
}

.animate__animated.animate__delay-2-d-5s {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-delay: calc(var(--animate-delay)*2.5);
    animation-delay: calc(var(--animate-delay)*2.5);
}

.animate__animated.animate__delay-3-d-5s {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
    -webkit-animation-delay: calc(var(--animate-delay)*3.5);
    animation-delay: calc(var(--animate-delay)*3.5);
}

.animate__animated.animate__delay-4-d-5s {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
    -webkit-animation-delay: calc(var(--animate-delay)*4.5);
    animation-delay: calc(var(--animate-delay)*4.5);
}

.animate__animated.animate__delay-6s {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-delay: calc(var(--animate-delay)*6);
    animation-delay: calc(var(--animate-delay)*6);
}

.animate__animated.animate__delay-7s {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-delay: calc(var(--animate-delay)*7);
    animation-delay: calc(var(--animate-delay)*7);
}
.animate__animated.animate__delay-8s {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-delay: calc(var(--animate-delay)*8);
    animation-delay: calc(var(--animate-delay)*8);
}
.animate__animated.animate__delay-9s {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-delay: calc(var(--animate-delay)*9);
    animation-delay: calc(var(--animate-delay)*9);
}
.animate__animated.animate__delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-delay: calc(var(--animate-delay)*10);
    animation-delay: calc(var(--animate-delay)*10);
}

/* -------------------------------------------------------
 wipein_imagew
------------------------------------------------------- */
@-webkit-keyframes wipein_imagew{
	0%{		width:0%;	opacity:0;}
	100%{	width:100%;	opacity:1;}
}
@keyframes wipein_imagew{
	0%{		width:0%;	opacity:0;}
	100%{	width:100%;	opacity:1;}
}
/* -------------------------------------------------------
 wipeout_imagew
------------------------------------------------------- */
@-webkit-keyframes wipeout_imagew{
	0%{		width:100%;}
	100%{	width:0%;}
}
@keyframes wipeout_imagew{
	0%{		width:100%;}
	100%{	width:0%;}
}
/* 图片动画 */
.animate__wipeinImagew{
    position: relative;
    /* -webkit-animation: wipein_imagew 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms 1 normal forwards; */
    /* animation: wipein_imagew 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms 1 normal forwards; */
}
.animate_active .animate__wipeinImagew:after{
    -webkit-animation: wipeout_imagew 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms 1 normal forwards;
    animation: wipeout_imagew 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms 1 normal forwards;
    content:"";
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	right:0; top:0;
	background-color:rgba(255,255,255,0.8);
	transform: translate3d(0,0,0);
}

.animate__escale:hover{
    transform: scale(1.05);
    transition: all 0.5s;
}

.animate__fontBorderBottom::after{
    content: "";
    height: 1px;
    width: 100%;
    display: block;
    background-color: #98090A;
    transform-origin: left center;
    transform: scaleX(0);
    transition: all .5s ease-out;
    position: absolute;
    left: 0;
    top: 100%;
}

.animate_active .animate__fontBorderBottom::after{
    transform: scaleX(1);
}

/* 透明度动画 */
@-webkit-keyframes animate_opacity{
	0%{		opacity:0;}
	100%{	opacity:1;}
}
@keyframes animate_opacity{
	0%{		opacity:0;}
	100%{	opacity:1;}
}